<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-25 16:18:57
 *@描述:地区病组覆盖度 看学科建设
!-->
<template>
  <div class="page-tile-6">
    <div class="page-tile-6-left">
      <div class="page-tile-6-left-echarts" ref="pageTitle6TopEchartsRefs"></div>
      <div class="page-tile-6-left-card">
        {{ card1.text2 }} 共覆盖
        <span class="color-tips">{{ card1.text3 }}</span>
        组 同比去年
        <span class="color-tips">{{ card1.text1 }}</span>
        ,{{ card1.text4 }}
      </div>
    </div>
    <formList style="width: 35%" :formParameter="formParameter" :data_list="data_list" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList';
export default {
  // 组件名称
  name: 'pageTile6',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      card1: {},
      data_list: [],
      formParameter: [
        { width: '10%', title: '序号' },
        { width: '30%', title: 'MDC' },
        { width: '30%', title: '地区病组' },
        { width: '30%', title: '医院病组' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data, typeValue) {
      if (typeValue === '非全院') {
        this.formParameter[3].title = '科室病组';
      } else {
        this.formParameter[3].title = '医院病组';
      }
      let data_list = data.data_list;
      let desc = data.desc;
      //图表
      this.echartsInit(data_list);
      //内容
      this.cardData(desc);
    },
    //图表
    echartsInit(data_list) {
      this.data_list = data_list;
      var myChart = echarts.init(this.$refs.pageTitle6TopEchartsRefs);
      var option;
      option = {
        title: {},
        legend: {
          data: [this.formParameter[3].title, '地区病组'],
        },

        radar: {
          radius: '80%',
          axisLabel: {
            show: true,
          },
          splitArea: {
            show: false,
          },
          shape: 'circle',
          axisName: {
            fontSize: '18px',
            color: '#8e8e8e',
          },
          indicator: (function () {
            var res = [];
            for (var i = 0; i < data_list.length; i++) {
              res.push({ text: data_list[i]['MDC'] });
            }
            return res;
          })(),
        },
        series: [
          {
            type: 'radar',
            radarIndex: 0,
            data: [
              {
                name: this.formParameter[3].title,
                value: [],
                itemStyle: {
                  color: '#71b8ee', // 设置地区病组的颜色为蓝色
                },
                areaStyle: {
                  color: '#71b8ee33', //区块色颜色
                },
                lineStyle: {
                  width: 3, // 控制雷达图区块边线的粗细
                  color: '#86c9f8',
                },
                //去掉节点
                symbol: 'none',
              },
              {
                name: '地区病组',
                value: [],
                itemStyle: {
                  color: '#85db9c', // 设置地区病组的颜色为蓝色
                },
                areaStyle: {
                  color: '#85db9c2e', //区块色颜色
                },
                lineStyle: {
                  width: 3, // 控制雷达图区块边线的粗细
                  color: '#85db9c',
                },
                //去掉节点
                symbol: 'none',
              },
            ],
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data[0].value.push(item[this.formParameter[3].title]);
        option.series[0].data[1].value.push(item['地区病组']);
      });
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc['同比去年'],
        text2: desc['时间'],
        text3: desc['组数'],
        text4: desc['趋势'],
      };
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-6 {
  display: flex;
  height: 100%;
  .page-tile-6-left {
    width: 65%;
    height: 100%;
    .page-tile-6-left-echarts {
      height: 90%;
    }
    .page-tile-6-left-card {
      margin: 0 20px;
      padding: 2%;
      display: flex;
      align-items: center;
      font-size: 1.7rem;
      height: 10%;
      line-height: 80px;
      background: #fff2ca;
      border-radius: 16px;
      border: 1px solid #000;
    }
  }

  .color-tips {
    color: #ff1310;
  }
}
</style>
